<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <div class="news_wrap">
      <div class="news_title_wrap">
        <div class="news_title">
          <h3>{{detail.title}}</h3>
        </div>
        <div class="news_time">
          <p>发表时间:{{detail.add_time | dateFormat}}</p>
          <p>点击次数:{{detail.click}}</p>
        </div>
      </div>
      <!-- 图片区域 -->
      <div class="img_wrap" style="margin:10px 0;padding:0 9px">
        <van-image
          width="6.0rem"
          height="6.5rem"
          fit="contain"
          style="marginRight:0.5rem;marginBottom:0.5rem;box-shadow: 1px 0 8px 1px rgba(0,0,0,.3);"
          :src="item.src"
          v-lazy="item.src"
          v-for="item in imageList"
          @click="imagePreview()"
        />
      </div>
      <div class="news_content_wrap" v-html="detail.content"></div>
      <!-- 评论框 -->
      <Comments :id="getId"></Comments>
    </div>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import Vue from "vue";
import { ImagePreview } from "vant";
import NavBar from "../components/navBar";
import TabBar from '../components/Tabbar'
Vue.use(ImagePreview);
// 引入评论组件
import Comments from "../components/Comment";
export default {
  components: {
    Comments,
    NavBar,
    TabBar
  },
  data() {
    return {
      // 图片数组
      imageList: [],
      // 新闻详情对象
      detail: {}
    };
  },
  created() {
    this.getImageDetail();
    this.getNewDetail();
  },
  methods: {
    // 获取图片数组
    async getImageDetail(id) {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.getImgId}`
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图文数据失败，请联系管理员");
      }
      this.imageList = res.message;
    },
    // 获取图文详情数据
    async getNewDetail() {
      const { data: res } = await this.$http.get(`/api/getnew/${this.getId}`);
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图文数据失败，请联系管理员");
      }
      this.detail = res.message[0];
    },
    // 图片预览
    imagePreview() {
      // 修改为 新的 图片数组
      let imgNewList = [];
      this.imageList.forEach(v => {
        imgNewList.push(v.src);
      });
      ImagePreview({ images: imgNewList });
    }
  },
  computed: {
    getId() {
      // 获取分类id
      const cateid = this.$route.query.cateid;
      return cateid;
    },
    getImgId() {
      // 获取图片id
      const imgId = this.$route.params.id;

      return imgId;
    }
  }
};
</script>

<style lang="less" scoped>
.van-image-preview__image {
  width: 50%;
  img {
    width: 100%;
  }
}
.news_wrap {
  padding: 0px 10px;
  .news_title_wrap {
    border-bottom: 1px solid #ccc;
    .news_title {
      color: #1989fa;
      text-align: center;
      font-size: 13px;
    }
    .news_time {
      display: flex;
      justify-content: space-between;
      p {
        font-size: 13px;
        color: #1989fa;
      }
    }
  }
}
</style>